|
tab栏切换动画实现及注意事项
技术栈：vue
遇到的问题
scene : 移动端页面左右滑动切换tab栏，实现页面切换类 app 原生动画，不影响页面正常点击事件
key : 移动端左右滑动，可以从touchstart , touchmove , touchend 事件入手，获取 pageX 左右移动的距离来判断方向，pageY 的上下移动距离来确定是否是滚动事件，监听 touch 的 trigger event 来判断是否是 tap 事件,从而实现功能
// template
// methods
touchStart(e) {
const touch = e.touches[0]
this.touch.startX = touch.pageX
this.touch.startY = touch.pageY
this.date_start = new Date().getTime();
},
touchEnd(e) {
let touch = e.changedTouches[0]
let date_end = new Date().getTime();
let dur = date_end - this.date_start;
let startX = this.touch.startX
let startY = this.touch.startY
let disX = touch.pageX - startX
let disY = touch.pageY - startY
// 判断是滑动还是点击事件
// 距离和时间可以自主调节
if((Math.abs(disX)>10 && Math.abs(disX)100){
if(Math.abs(disX) > 5*Math.abs(disY) && dur
if(selectTabFlag === item){
number = index
}
})
if(disX
// 向右滑动则向左选中列表中的数据切换
}
} else {
return
|